<template>
  <div class="ticketList-box">
    <div class="order-seach-box">
      <el-form ref="form" class="el-form-box" :model="form" label-width="120px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input placeholder="请输入" v-model.trim="form.billcode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input placeholder="请输入" maxlength="15" v-model.trim="form.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="购买人姓名">
              <el-input placeholder="请输入" v-model.trim="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button @click="getFunList()" :loading="sreachLoding" icon="el-icon-search" style="margin-left:26px" type="primary">搜索</el-button>
            <el-button @click="clearList">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="order-con-box">
      <el-table ref="multipleTable" empty-text="暂无订单信息~" :data="$store.state.refundList" border style="width: 100%">
        <el-table-column align="center" prop="billcode" label="订单号"></el-table-column>
        <el-table-column align="center" label="购买人信息">
          <template slot-scope="scope" align="center">
            <p class="cellPLeft">
              <span>{{ scope.row.pname }}</span>
              <span>{{ scope.row.phone }}</span>
            </p>
            <p class="cellPLeft">
              <span>{{ scope.row.cname}}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门票信息">
          <template slot-scope="scope">
            <p>
              <span>{{ scope.row.tname}}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额">
          <template slot-scope="scope">{{ scope.row.mny }}元</template>
        </el-table-column>
        <el-table-column align="center" label="下单时间">
          <template slot-scope="scope">
            <p> {{$moment(scope.row.createtime,'YYYY-MM-DD HH:mm')}} </p>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==0">待付款</el-tag>
            <el-tag type="success" v-if="scope.row.status==1">已付款</el-tag>
            <el-tag type="info" v-if="scope.row.status==2">关闭</el-tag>
            <el-tag type="danger" v-if="scope.row.status==3">支付失败</el-tag>
            <el-tag type="warning" v-if="scope.row.status==4">退款</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="110" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==1" :loading="btnLoding" @click="tuiMoney(scope.row)" icon="el-icon-refresh">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
import service from "@/api/order";
export default {
  data() {
    return {
      sreachLoding: false, //搜索loding
      btnLoding: false, //按钮loding
      form: {
        //搜索表单

        billcode: "",
        phone: "",
        name: ""
      }
    };
  },
  created() {
    this.getFunList();
  },
  computed: {
    thisActivityId() {
      return this.$store.state.activityId;
    }
  },
  watch: {
    thisActivityId(a, b) {
      this.getFunList();
    }
  },
  methods: {
    // 退款
    tuiMoney(scopeRow) {
      this.$confirm("您确定是否要进行退款, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            activityId: this.$store.state.activityId,
            billcode: scopeRow.billcode,
            status: 4
          };
          this.btnLoding = true;
          this.$http
            .post(
              "/api/isv/ticketPurchasePC/returnTicketOrderByBillcode",
              subData
            )
            .then(
              res => {
                this.btnLoding = false;
                if (res.data.success) {
                  this.$message({
                    type: "success",
                    message: "提交成功!"
                  });
                  this.$http
                    .post("/api/isv/ticketPurchasePC/queryTicketOrderByParam", {
                      billcode: "",
                      phone: "",
                      name: "",
                      projectId: this.$store.state.activityId
                    })
                    .then(
                      res => {
                        if (res.data.success) {
                          this.$store.state.refundList = [];
                          this.$store.state.refundList = res.data.result;
                          // 开始时间进行排序
                          for (
                            let q = 0;
                            q < this.$store.state.refundList.length;
                            q++
                          ) {
                            for (
                              let j = q + 1;
                              j < this.$store.state.refundList.length;
                              j++
                            ) {
                              if (
                                this.$store.state.refundList[q].createtime <
                                this.$store.state.refundList[j].createtime
                              ) {
                                let tmp = this.$store.state.refundList[q];
                                this.$store.state.refundList[
                                  q
                                ] = this.$store.state.refundList[j];
                                this.$store.state.refundList[j] = tmp;
                              }
                            }
                          }
                        } else {
                          this.$message({
                            message: res.data.errorMsg || "数据获取失败",
                            type: "warning"
                          });
                        }
                      },
                      err => {
                        // this.$message.error("服务器出小差了");
                      }
                    );
                } else {
                  this.$message({
                    message: res.data.errorMsg || "数据提交失败",
                    type: "warning"
                  });
                }
              },
              err => {
                this.btnLoding = false;
                this.$message.error("服务器出小差了");
              }
            );
        })
        .catch(() => {});
    },
    // 查询数据
    async getFunList() {
      this.sreachLoding = true;
      const { data = [] } = await service.queryTicketOrderByParam({
        projectId: this.$store.state.activityId,
        ...this.form
      });
      console.log(data);
      this.$store.state.refundList = data;
      this.sreachLoding = false;
    },
    clearList() {
      this.form = {
        projectId: this.$store.state.activityId,
        billcode: "",
        phone: "",
        name: ""
      };
      this.getFunList();
    }
  }
};
</script>
<style>
.ticketList-box {
  width: 100%;
  height: auto;
}
.order-seach-box {
  width: 100%;
  height: auto;
  /* min-height: 200px; */
  background: #fff;
  border-radius: 6px;
  padding: 26px;
}
.order-con-box {
  width: 100%;
  height: auto;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 26px;
  margin-top: 18px;
}
.ticketList-top-btn {
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  /* text-align: left; */
  /* width: 100%; */
}
</style>
